<template>
	<view class="content">
		<u-tabs :height="120" :list="[{name: '我的话题'}, {name: '话题广场'}, {name: '话题分类'}]" ref='tabs' :is-scroll="false"
			:current="current" @change="change" :bar-width='200'></u-tabs>
		<swiper :indicator-dots="true" class="TopicChose"  :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<!-- 全屏选项卡 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(1)">
					<view class="page-box">
					<myTopic :pageSize='pageSize2'></myTopic>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(0)">
					<view class="page-box">
						<TopicCenter :pageSize='pageSize'></TopicCenter>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(2)">
					<view class="page-box">
						<TopicClass :pageSize='pageSize3'></TopicClass>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-loadmore 
		        :status="status" 
		        loading-text="正在加载..." 
		        loadmore-text="下拉加载" 
		        nomore-text="没有更多了" 
		    />
	</view>
</template>

<script>
	import TopicCenter from '@/components/homePage/TopicCenter/TopicCenter.vue'
	import myTopic from '@/components/homePage/myTopic/myTopic.vue'
	import TopicClass from '@/components/homePage/TopicClass/TopicClass.vue'
	export default {
		name:'index',
		components:{TopicCenter,myTopic,TopicClass},
		data() {
			return {
				status:'',
				pageSize:10,
				pageSize2:10,
				pageSize3:10,
				current: 1,				
				activeColor: this.$u.color['warning'],
				swiperCurrent: 1,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],							
			}
		},
		onLoad() {
			this.getOrderList(1);
		},
		methods: {
			// 页面数据
			getOrderList(idx) {	
				
			},
			change(index) {//点击切换选项卡触发的回调
				this.current = index;
				this.swiperCurrent = index;
				this.getOrderList(index);
			},
			reachBottom(value) {//触底发生向指定组件发送加载更多指令
				this.status='loading'
					setTimeout(() => {
						if(value==0){this.pageSize=this.pageSize+10}
						if(value==1){this.pageSize2=this.pageSize2+10}
						if(value==2){this.pageSize3=this.pageSize3+10}
		               this.status='loadmore'
					}, 1200);
				
			},
			//全屏选项卡的动画效果,
			transition({
				detail: {
					dx
				}
			}) {
				
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.swiperCurrent = current;
				this.current = current;
			},		
		}
	}
</script>

<style lang="scss">
	.content {
		.home-nav {
			background-color: #F8F9F9 !important;
		}
		.TopicChose{
			height: 90vh;
		}
	}
</style>

